<template>
  <!-- 查询表单 -->
  <div class="default-table-container auto-height-container">
    <search-form
      v-show="isShowSearch"
      :columns="searchColumns"
      :reset="_reset"
      :search="_search"
      :search-col="searchCol"
      :search-param="searchParam"
      @change-date="changeDate"
    />

    <!-- 表格主体 -->
    <div class="table-main" :class="isCard ? 'card' : ''">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <slot :is-selected="isSelected" name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" />
        </div>
        <div v-if="toolButton" class="header-button-ri">
          <slot name="toolButton">
            <el-button v-if="showToolButton('refresh')" circle :icon="Refresh" @click="getTableList" />
            <el-button v-if="showToolButton('setting') && columns.length" circle :icon="Operation" @click="openColSetting" />
            <el-button
              v-if="showToolButton('search') && searchColumns?.length"
              circle
              :icon="Search"
              @click="isShowSearch = !isShowSearch"
            />
          </slot>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table
        ref="tableRef"
        v-bind="$attrs"
        :border="border"
        :data="processTableData"
        :height="height ?? '100%'"
        :max-height="maxHeight ?? '100%'"
        :row-key="rowKey"
        stripe
        @row-click="selectRow"
        @selection-change="selectionChange"
      >
        <!-- 默认插槽 -->
        <slot />
        <template v-for="item in tableColumns" :key="item">
          <!-- selection || radio || index || expand || sort -->
          <el-table-column
            v-if="item.type && columnTypes.includes(item.type as any)"
            v-bind="item"
            :align="item.align ?? 'center'"
            :reserve-selection="item.type === 'selection'"
          >
            <template #default="scope">
              <!-- expand -->
              <template v-if="item.type === 'expand'">
                <component :is="item.render" v-bind="scope" v-if="item.render" />
                <slot v-else :name="item.type" v-bind="scope" />
              </template>
              <!-- radio -->
              <el-radio v-if="item.type === 'radio'" v-model="radio" :label="scope.row">
                <i></i>
              </el-radio>
              <!-- sort -->
              <el-tag v-if="item.type == 'sort'" class="move">
                <el-icon>
                  <d-caret />
                </el-icon>
              </el-tag>
            </template>
          </el-table-column>
          <!-- other -->
          <table-column v-if="!item.type && item.prop && item.isShow" :column="item">
            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
              <slot :name="slot" v-bind="scope" />
            </template>
          </table-column>
        </template>
        <!-- 插入表格最后一行之后的插槽 -->
        <template #append>
          <slot name="append" />
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <!-- <slot name="empty">
            <img alt="notData" src="@/assets/images/notData.png" />
            <div>暂无数据</div>
          </slot> -->
            <el-empty description="暂无数据" />
          </div>
        </template>
      </el-table>

      <!-- 分页组件 -->
      <slot name="pagination">
        <pagination
          v-if="pagination"
          :handle-current-change="handleCurrentChange"
          :handle-size-change="handleSizeChange"
          :pageable="pageable"
        />
      </slot>
    </div>
    <!-- 列设置 -->
    <col-setting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
  </div>
</template>

<script setup lang="ts" name="ProTable">
import { Operation, Refresh, Search } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import Sortable from 'sortablejs'
import { computed, onMounted, provide, reactive, ref, unref, watch } from 'vue'
import { BreakPoint } from '../Grid/interface'
import ColSetting from './components/ColSetting.vue'
import Pagination from './components/Pagination.vue'
import TableColumn from './components/TableColumn.vue'
import { ColumnProps, TypeProps } from './interface'
import { useSelection } from '/@/hooks/useSelection'
import { useTable } from '/@/hooks/useTable'
import { handleProp } from '/@/utils'
import SearchForm from '/@vab/components/SearchForm/index.vue'

export interface ProTableProps {
  columns: ColumnProps[] // 列配置项  ==> 必传
  data?: any[] // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
  requestApi?: (params: any) => Promise<any> // 请求表格数据的 api ==> 非必传
  requestAuto?: boolean // 是否自动执行请求 api ==> 非必传（默认为true）
  requestError?: (params: any) => void // 表格 api 请求错误监听 ==> 非必传
  dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
  maxHeight?: number // 表格最大高度==> 非必传
  height?: number // 表格高度==> 非必传
  title?: string // 表格标题 ==> 非必传
  pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
  initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
  border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
  toolButton?: ('refresh' | 'setting' | 'search')[] | boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
  rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
  searchCol?: number | Record<BreakPoint, number> // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
  isSpanMethod?: boolean // 是否合并
  isCard?: boolean // 是否显示内边框
  mergerFields?: any
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProTableProps>(), {
  columns: () => [],
  requestAuto: true,
  pagination: true,
  initParam: {},
  border: true,
  isSpanMethod: false,
  toolButton: true,
  isCard: true,
  rowKey: 'id',
  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
  mergerFields: [],
})
// table 实例
const tableRef = ref<InstanceType<typeof ElTable>>()

// column 列类型
const columnTypes: TypeProps[] = ['selection', 'radio', 'index', 'expand', 'sort']

// 是否显示搜索模块
const isShowSearch = ref(true)

// 控制 ToolButton 显示
const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
}

// 单选值
const radio = ref('')
const selectRow = (row: any) => {
  radio.value = row
}
// 表格多选 Hooks
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey)

// 表格操作 Hooks
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } = useTable(
  props.requestApi,
  props.initParam,
  props.pagination,
  props.isSpanMethod,
  props.dataCallback,
  props.requestError,
  props.mergerFields
)

// 清空选中数据列表
const clearSelection = () => tableRef.value!.clearSelection()

// 初始化表格数据 && 拖拽排序
onMounted(() => {
  dragSort()
  props.requestAuto && getTableList()
  props.data && (pageable.value.total = props.data.length)
})

// 处理表格数据
const processTableData = computed(() => {
  if (!props.data) return tableData.value
  if (!props.pagination) return props.data

  return props.data.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageSize * pageable.value.pageNum)
})

// 监听页面 initParam 改化，重新获取表格数据
watch(() => props.initParam, getTableList, { deep: true })

// 接收 columns 并设置为响应式
const tableColumns = reactive<ColumnProps[]>(props.columns)

// 扁平化 columns，将一个多维的数组转换为一个一维的数组
const flatColumns = computed(() => flatColumnsFunc(tableColumns))

// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
const enumMap = ref(new Map<string, { [key: string]: any }[]>())
const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
  if (!enumValue) return

  // 如果当前 enumMap 存在相同的值 return
  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return

  // 当前 enum 为静态数据，则直接存储到 enumMap
  if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))

  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
  enumMap.value.set(prop!, [])

  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
  const { data } = await enumValue()
  enumMap.value.set(prop!, data.list || data)
}

// 注入 enumMap
provide('enumMap', enumMap)

// 扁平化 columns 的方法
const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
  columns.forEach(async (col) => {
    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
    flatArr.push(col)

    // column 添加默认 isShow && isFilterEnum 属性值
    col.isShow = col.isShow ?? true
    col.isFilterEnum = col.isFilterEnum ?? true

    // 设置 enumMap
    await setEnumMap(col)
  })
  return flatArr.filter((item) => !item._children?.length)
}

// 过滤需要搜索的配置项 && 排序
const searchColumns = computed(() => {
  return flatColumns.value?.filter((item) => item.search?.el || item.search?.render).sort((a, b) => a.search!.order! - b.search!.order!)
})

// 设置 搜索表单默认排序 && 搜索表单项的默认值
searchColumns.value?.forEach((column, index) => {
  column.search!.order = column.search?.order ?? index + 2
  const key = column.search?.key ?? handleProp(column.prop!)
  const defaultValue = column.search?.defaultValue
  if (defaultValue !== undefined && defaultValue !== null) {
    searchInitParam.value[key] = defaultValue
    searchParam.value[key] = defaultValue
  }
})

// 列设置 ==> 需要过滤掉不需要设置的列
const colRef = ref()
const colSetting = tableColumns!.filter((item: any) => {
  const { type, prop, isShow } = item
  return !columnTypes.includes((type as any)!) && prop !== 'operation' && isShow
})
const openColSetting = () => colRef.value.openColSetting()

// 定义 emit 事件
const emit = defineEmits<{
  search: []
  reset: []
  dargSort: [{ newIndex?: number; oldIndex?: number }]
}>()

const _search = () => {
  search()
  emit('search')
}

const _reset = () => {
  reset()
  emit('reset')
}

// 拖拽排序
const dragSort = () => {
  const tbody = document.querySelector('.el-table__body-wrapper tbody') as HTMLElement
  Sortable.create(tbody, {
    handle: '.move',
    animation: 300,
    onEnd({ newIndex, oldIndex }: { newIndex: any; oldIndex: any }) {
      const [removedItem] = processTableData.value.splice(oldIndex!, 1)
      processTableData.value.splice(newIndex!, 0, removedItem)
      emit('dargSort', { newIndex, oldIndex })
    },
  })
}

const resetTableData = () => {
  tableData.value = []
}

const replaceTableData = (e: any[]) => {
  tableData.value = e
}

// 使用快捷方式修改日期
const changeDate = (e: any) => {
  // console.log(e, props.columns.find(v => v.search?.el === "date-picker")?.search?.key as string, 222);
  searchParam.value[props.columns.find((v) => v.search?.el === 'date-picker')?.search?.key as string] = e.time
}

// 隐藏列
const changeColSetting = (columns: boolean[]) => {
  columns.forEach((item, index) => {
    tableColumns[index].isShow = item
  })
}

// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去，父组件可以通过ref获取方法)
defineExpose({
  element: tableRef,
  tableData: processTableData,
  resetTableData,
  replaceTableData,
  radio,
  pageable,
  searchParam,
  searchInitParam,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  clearSelection,
  enumMap,
  isSelected,
  selectedList,
  selectedListIds,
  selectionChange,
  selectRow,
  changeColSetting,
})
</script>
